<template>
	<div>
	<div>
		<h1>$store.state.a.count: {{$store.state.a.count}}</h1>
		<h1>$store.state.b.count: {{$store.state.b.count}}</h1>
	</div>
	<div>
		<h1>$store.state.a.count: {{$store.state.a.count}}</h1>
      <h1>count: {{count}}</h1>
      <h1>$store.a.getters.count: {{$store.getters.count}}</h1>
      <button @click="$store.commit({type:'add',n:2})" >加2</button><button @click='$store.commit("sub")'>减1</button>
       <button @click="add({n:2})" >加2</button>
       <div>
       	<button @click='actionSub'>action减1</button>
       	<button @click="actionAdd({type:'add',n:4})" >action加4</button>
       	<button @click='$store.dispatch("actionSub")'>action dispatch减1</button>
       	<button @click='store'>组合 action 减1</button>
       </div>
	</div>
      
     </div>
</template>
<script type="text/javascript">
	import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
	export default {
		computed: {
			...mapState({
				count:'count'
			}),
			// ...mapGetters([
			// 		'count'
			// 	])
		},
		methods:{
			...mapMutations([
					'add'
				]),
			...mapActions([
					'actionSub',
					'actionAdd'
				]),
			store(){
				console.log(console.log(this.$store))
			}
		}
	}
</script>

<style type="text/css" scoped>
	p{text-align:left;}
	button{
		text-size:25px;
		margin:10px 30px;
	}
</style>